<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<style type="text/css">
body{padding:10px;}
</style>
</head>
<body>

<table class="layui-hide" id="test"></table>

<script type="text/html" id="sex">
{{#  if(d.sex != 1){ }}
    <span>女</span>
{{#  }else{ }}
    <span>男</span>
{{# } }}
</script>


<script src="./layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script type="text/javascript">
var App = new Vue({
    el: '#app',
    data: {
        list:[],
    },
    mounted: function() {
        this.getList();
    },
    methods: {
        getList(){
            let that = this;
            that.$nextTick(function(){
                layui.use('table',function(){
                    var table = layui.table;
                    table.render({
                        elem:'#test',
                        url:"./php/user.php",
                        cellMinWidth:80,
                        cols:[[
                            {field:'id',width:80,title:'ID',sort:true,},
                            {field:'username',width:100,title:'用户名',edit:true},
                            {field:'sex',width:80,title:'性别',templet:'#sex'},
                            {field:'state',width:100,title:'状态',templet:state},
                            {field:'sign',width:'30%',minWidth:100,title:'签名'},
                            {field:'experience',title:'积分',sort: true},
                            {field:'score',title:'积分',sort: true},
                            {field:'classify',title:'职业'},
                            {field:'wealth',title:'财富',sort: true},
                        ]],
                        // limit:5, // 配置默认的分页条数
                        // page:true, // 开始分页
                        page:{
                            layout:['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定义分页布局
                            // curr:5,// 设定初始在第5页
                            groups:3, //只显示一个页码
                            first:false,// 不显示首页
                            last:false,// 不显示尾页
                        },
                    });
                    function state(row){
                        // return row.state === 1 ? '正常' : row.state === 2 ? '禁用' : '';
                        return row.state === 1 ? '<input type="checkbox" checked name="state" lay-filter="onoff" lay-skin="switch" lay-text="正常|禁用">' : row.state === 2 ? '<input type="checkbox" name="state" lay-filter="onoff" lay-skin="switch" lay-text="正常|禁用">' : '';
                    }
                });
            });
        },
    }
});
</script>
</body>
</html>